<template>
  <teleport to="body">
    <div v-if="clickShow" class="mask">
      <div class="verify-box" :style="{ 'max-width': parseInt(imgSize.width) + 30 + 'px' }">
        <div class="verify-box-top">
          <div class="title">请完成安全验证</div>
          <div class="verify-box-close" @click="closeBox">
            <i class="x-icon icon-073" />
          </div>
        </div>

        <div class="verify-box-bottom">
          <!-- 验证码容器 -->
          <VerifySlide
            ref="instance"
            :v-space="vSpace"
            :explain="explain"
            :img-size="imgSize"
            :block-size="blockSize"
            :bar-size="barSize"
          ></VerifySlide>
        </div>
      </div>
    </div>
  </teleport>
</template>
<script type="text/babel">
  import { VerifySlide } from './Verify/index'
  import { computed, ref, toRefs, nextTick } from 'vue'

  export default {
    name: 'Vue2Verify',
    components: {
      VerifySlide
    },
    props: {
      vSpace: {
        type: Number
      },
      explain: {
        type: String
      },
      imgSize: {
        type: Object,
        default() {
          return {
            width: '280px',
            height: '158px'
          }
        }
      },
      blockSize: {
        type: Object
      },
      barSize: {
        type: Object
      }
    },
    emits: ['ready', 'success', 'error', 'close'],
    setup(props, { emit }) {
      const clickShow = ref(false)
      const instance = ref({})

      /**
       * refresh
       * @description 刷新
       * */
      const refresh = () => {
        if (instance.value.refresh) {
          instance.value.refresh()
        }
      }
      const closeBox = () => {
        clickShow.value = false
        emit('close')
        refresh()
      }
      const show = () => {
        clickShow.value = true
      }

      return {
        clickShow,
        instance,
        closeBox,
        show
      }
    }
  }
</script>
<style lang="scss">
  .mask {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 3001;
    width: 100%;
    height: 100vh;
    background: rgba(0, 0, 0, 0.3);
    transition: all 0.5s;
  }
  .verify-box {
    z-index: 1;
    position: relative;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    background: #fff;
    border-radius: 4px;
    user-select: none;

    .verify-box-top {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 30px 15px 15px;
      height: 50px;
      font-size: 20px;
      color: #000000;
      box-sizing: border-box;

      .verify-box-close {
        font-size: 14px;
        color: #999;
        cursor: pointer;
      }
    }

    .verify-box-bottom {
      padding: 15px;
      box-sizing: border-box;
    }
  }

  .verify-tips {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 30px;
    line-height: 30px;
    color: #fff;
  }
  .suc-bg {
    background-color: rgba(92, 184, 92, 0.5);
    filter: progid:DXImageTransform.Microsoft.gradient(startcolorstr=#7f5CB85C, endcolorstr=#7f5CB85C);
  }
  .err-bg {
    background-color: rgba(217, 83, 79, 0.5);
    filter: progid:DXImageTransform.Microsoft.gradient(startcolorstr=#7fD9534F, endcolorstr=#7fD9534F);
  }
  .tips-enter,
  .tips-leave-to {
    bottom: -30px;
  }
  .tips-enter-active,
  .tips-leave-active {
    transition: bottom 0.5s;
  }

  /*滑动验证码*/
  .verify-bar-area {
    position: relative;
    background: #f8f8f8;
    text-align: center;
    border: 1px solid #e5e5e5;
    border-radius: 2px;

    .verify-move-block {
      position: absolute;
      top: -1px;
      left: -1px;
      background: #38f;
      cursor: pointer;
      box-sizing: content-box;
      border-radius: 2px;
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;

      .verify-sub-block {
        position: absolute;
        text-align: center;
        z-index: 3;
        cursor: default;
      }

      .verify-icon {
        font-size: 18px;
        color: #ffffff;
      }
    }

    .verify-left-bar {
      position: absolute;
      top: 0;
      left: 0;
      width: 0;
      border: 1px solid rgba(51, 136, 255, 0.3);
      height: 100%;
      box-sizing: border-box;
      background: rgba(51, 136, 255, 0.16);
      border-right: 0;
      border-top-left-radius: 2px;
      border-bottom-left-radius: 2px;
    }

    .verify-msg {
      z-index: 3;
    }
  }

  .verify-img-panel {
    .verify-img {
      display: block;
      width: 100%;
      height: 100%;
      pointer-events: none;
    }

    .verify-refresh {
      z-index: 2;
      position: absolute;
      padding: 5px;
      top: 0;
      right: 0;
      color: #ffffff;
      cursor: pointer;
      i {
        font-size: 20px;
      }
    }
  }
</style>
